<template>
  <!-- 举报管理 -->
  <el-dialog :modal="true" title="违规信息" :visible.sync="dialogVisible" width="60%">
    <!-- <heads></heads> -->
    <!-- <titlesearch></titlesearch> -->
    <div class="gerenBox">
      <!-- <ceList :index="6"></ceList> -->
      <div class="con">
        <!-- <div class="leibie">
          <div class="anniu">
            <div :class="leibie==0?'xuan':''" @click="leibieClick(0)">收到</div>
            <div :class="leibie==1?'xuan':''" @click="leibieClick(1)">发起</div>
          </div>
        </div> -->
        <div class="list">
          <div class="li" v-for="(item, index) in myjbList" :key="index">
            <div style="margin-top: 12px;">
              <p>
                {{
                  item.businessType == 1
                  ? "举报房源"
                  : item.businessType == 2
                    ? "举报车源"
                    : item.businessType == 4
                      ? item.reportCategory == 4
                        ? "举报招聘"
                        : "举报简历"
                      : "举报用户"
                }}：
              </p>
              <!-- style="width: 970px;" -->
              <p style="padding-right: 20px;">{{ item.title }}</p>
            </div>
            <div>
              <!-- style="width: 970px;" -->
              <p>违规原因：</p>
              <p style="padding-right: 20px;">
                {{ item.reportType }}({{ item.reportContent }})
              </p>
            </div>
            <div>
              <p>举报时间：</p>
              <!-- style="width: 970px;" -->
              <p style="padding-right: 20px;"> {{ item.createDate }}</p>
            </div>
            <!-- width: 970px; -->
            <div v-if="item.image.length"
              style="padding-right: 20px;display:flex;flex-wrap: wrap;align-items: flex-start;margin-bottom:24px;">
              <p>举报图片：</p>
              <div style="display:flex;flex-wrap: wrap;align-items: flex-start;margin-left: 0px;width:880px;">
                <div style="width:100px;margin-top: 20px;margin-left: 0px;margin-right: 12px;margin-bottom:16px;"
                  v-for="(eim, index) in item.image" :key="index">
                  <img :src="eim" @click.stop="previewImg(item, index)" style="width: 100%;object-fit: contain;" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-empty description="暂无违规信息" v-if="myjbList.length == 0"></el-empty>
        <div class="fenye">
          <el-pagination @current-change="jbmyCurrentChange" background layout="prev, pager, next" :total="juBaoMytotal"
            :page-size="juBaoMyPage.pageSize" :current-page="juBaoMyPage.PageNo"
            style="text-align: center;"></el-pagination>
        </div>
      </div>
    </div>
    <!-- <floor></floor> -->
  </el-dialog>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import ceList from "../../components/ceList.vue";
import titlesearch from "../../components/titlesearch.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch
  },
  name: "report",
  props: ["bUserId", "businessType", "noBT"],
  data() {
    return {
      dialogVisible: false,
      xuan: 6,
      leibie: 0,
      user: {},
      myJubaoPage: {
        pageNo: 1,
        pageSize: 2,
        userId: ""
      },
      myjbList: [],
      myjbtotal: 0,
      juBaoMyPage: {
        pageNo: 1,
        pageSize: 2,
        userId: ""
      },
      juBaoMytotal: 0
    };
  },
  watch: {
    bUserId(newV, oldV) {
      if (newV != "") {
        this.myjbList = [];
        this.getUser();
        if (JSON.parse(localStorage.getItem("userInfo")).id == newV) {
          //
          // this.getMyReportRecord()
          this.leibieClick(1, true);
        } else {
          // 跟自己无关的
          this.juBaoMyPage.userId = newV;
          this.leibieClick(0, true);
          // this.getReportMyRecord()
        }
      }
    }
  },
  created() {
    // this.juBaoMyPage.userId = this.bUserId
    // this.getReportMyRecord()
  },
  methods: {
    previewImg(item, index) {
      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        nowImgIndex: index, // 多图预览，默认展示第二张图片
        imgList: item.image // 需要预览的多图数组
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.myJubaoPage.userId = user.id;
        // this.juBaoMyPage.userId = user.id
        // this.getReportMyRecord()
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        // this.$router.push("/");
      }
    },
    //我举报的
    getMyReportRecord() {
      this.$getHttp("/mob/user/getMyReportRecord", {
        ...this.myJubaoPage,
        businessType: this.businessType == 1 ? "" : this.businessType
      }).then(data => {
        if (data.code == 200) {
          // 图片处理
          data.page.list.forEach(el => {
            if (el.image) {
              el.image = el.image.split("|");
            }
          });
          this.myjbList = data.page.list;
          this.myjbtotal = data.page.count;
        }
      });
    },
    //举报我的
    getReportMyRecord() {
      this.dialogVisible = true;
      this.juBaoMyPage.userId = this.bUserId;
      this.$getHttp("/mob/user/getReportMyRecord", {
        ...this.juBaoMyPage,
        businessType: this.noBT
          ? ""
          : this.businessType == 1
            ? ""
            : this.businessType
      }).then(data => {
        if (data.code == 200) {
          // 图片处理
          data.page.list.forEach(el => {
            if (el.image) {
              el.image = el.image.split("|");
            }
          });
          this.myjbList = data.page.list;
          this.juBaoMytotal = data.page.count;
        }
      });
    },
    // getReportMyRecords(){
    //   this.juBaoMyPage.userId = this.bUserId
    // 	this.$getHttp('/mob/user/getReportMyRecord',this.juBaoMyPage).then((data) =>{
    // 		if(data.code == 200){
    //       data.page.list.forEach(el => {
    //         if (el.image) {
    //           el.image = el.image.split("|");
    //         }
    //       });
    // 			this.myjbList = data.page.list
    // 			this.juBaoMytotal = data.page.count
    // 		}
    // 	})
    // },
    xuanClick(num) {
      this.xuan = num;
      switch (num) {
        case 1:
          this.$router.push({
            path: "/my/index"
          });
          break;
        case 3:
          this.$router.push({
            path: "/my/bbcz/bbczpersonal"
          });
          break;
        case 4:
          this.$router.push({
            path: "/my/collect"
          });
          break;
        case 5:
          this.$router.push({
            path: "/my/browsing"
          });
          break;
        case 6:
          this.$router.push({
            path: "/my/inform"
          });
          break;
        case 8:
          this.$router.push({
            path: "/my/bbcz/bbczpersonal"
          });
          break;
        case 10:
          this.$router.push({
            path: "/my/instrument"
          });
          break;
      }
    },
    myjbCurrentChange(e) {
      this.myJubaoPage.pageNo = e;
      this.getMyReportRecord();
    },
    jbmyCurrentChange(e) {
      if (JSON.parse(localStorage.getItem("userInfo")).id == this.bUserId) {
        this.myJubaoPage.pageNo = e;
        this.getMyReportRecord();
      } else {
        // 跟自己无关的
        this.juBaoMyPage.pageNo = e;
        this.getReportMyRecord();
      }
    },
    leibieClick(num, flag) {
      this.leibie = num;
      this.myJubaoPage.pageNo = 1;
      this.juBaoMyPage.pageNo = 1;
      if (flag) return;
      if (num == 0) {
        this.getReportMyRecord();
      } else {
        this.getMyReportRecord();
      }
    },
    //处理图片
    manageImg(imgs) {
      var arr = [];
      if (null != imgs) {
        if (imgs.indexOf("|") == -1) {
          if (imgs != "") {
            arr.push(imgs);
            console.log("imgs", arr);
            return arr;
          } else {
            return [];
          }
        } else {
          return imgs.split("|");
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 100%;
  color: #333;
  border: 1px solid #e0e0e0;

  .leibie {
    position: relative;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #e0e0e0;

    .anniu {
      position: absolute;
      left: 34px;
      bottom: 28px;

      div {
        display: inline-block;
        margin-right: 54px;
        font-size: 20px;
        cursor: pointer;
      }

      .xuan {
        transform: scale(1.2);
        color: #64b6a8;
      }
    }

    span {
      display: inline-block;
      position: absolute;
      width: 70px;
      height: 34px;
      background: #e0e0e0;
      border-radius: 22px;
      text-align: center;
      line-height: 34px;
      color: #333;
      top: 22px;
      right: 20px;
      cursor: pointer;
    }
  }

  .list {

    // margin-top: 33px;
    .li {
      width: 100%;
      min-height: 142px;
      // height: 260px;
      border-bottom: 10px solid #f2f2f2;

      div {
        margin-left: 32px;

        p {
          display: inline-block;
          vertical-align: top;
          font-size: 18px;
          margin-top: 12px;
        }
      }
    }
  }

  .fenye {
    width: 100%;
    margin: 16px 0;
    /* height: 50px; */
    text-align: center;
    /* margin-top: 50px; */
    /* margin-bottom: 30px; */
  }

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.gerenBox {
  width: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
  // margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;

        p {
          display: inline-block;
        }
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .rig {
      position: absolute;
      right: 0;

      .sousuo {
        position: relative;
        display: block;
        width: 380px;
        height: 50px;
        background: #ffffff;
        border-radius: 4px;
        font-size: 18px;
        overflow: hidden;
        display: inline-block;

        input {
          width: 300px;
          height: 55px;
          line-height: 55px;
          text-indent: 16px;
          font-size: 18px;
        }

        img {
          width: 25px;
          height: 25px;
          margin-left: 20px;
          cursor: pointer;
        }

        p {
          position: absolute;
          top: 0;
          right: 0;
          width: 80px;
          height: 55px;
          background-color: #64b6a8;
          text-align: center;
          line-height: 55px;
          font-size: 24px;
          cursor: pointer;
          color: #ffffff;
        }
      }

      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}

/deep/.el-dialog {
  margin-top: 3vh !important;
}
</style>
